<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p{
				color: #057ED4;
			}
			.p{
				color: #FFA500;
			}
			h1,span{
				color: #FF0000;
			}
			#div1 p{
				color: #FFA500;
			}
			/* input[checked="checked"]{
				background-color: #00FFFF;
			} */
			/* !important表示不能重写 */
			p[id="p2"]{
				color: #057ED4!important;;
			}
		</style>
	</head>
	<body>
		常用选择器：
			1、标签选择器
				交集：标签1 标签2
				并集：标签1，标签2
			2、类选择器：主要是指class属性。定义的时候需要以“.”开头
			3、id选择器：与id属性有关，定义的时候需要以“#”开头
			父元素：
			子元素：
			祖宗元素：隔代的，必须是祖宗元素；例：<div><p><span></span></p></div>
				div标签跟span标签是祖宗元素
			后代元素：
			兄弟元素：邻居
			
			
			<p id="p">id选择器</p>
			实际开发中不会出一个id出现多次，在同一个页面
			<p class="p">class选择器</p>
			<h1>我是h1标题</h1>
			<span id="">
				我是文本标签
			</span>
			<div id="div1">
				<p>我是div下的文本内容</p>
				<span><p>span标签中的p标签</p></span>
			</div>
			<div id="div2">
				<p>我是div下的文本内容</p>
			</div>
			
			属性选择器
			<!-- <input type="checkbox" checked="checked" />
			<input type="checkbox" /> -->
			<p id="p2">是p2标签</p>
	</body>
</html>
